import QtQuick 1.1
import com.nokia.meego 1.0
import QtMobility.gallery 1.1
import ecards.qmlcomponents 1.0
import Qt.labs.gestures 1.0

Item {
    id: mainItem;

    anchors.fill: parent;

    property Item currentItem;
    property Item backgroundItem;
    property Item newBackgroundItem;
    property string fileName;

    CardImage {
        id: asdf;
    }

    Item {
        id: items;

        CardText {
            id: sampleText;
            text: "Merry Christmas";
            x: 200
            y: 60
            rotation: 5
            scale: 0.8;
            color: "#FFFF80";
            z: 1
        }

        function itemPressed(item) {
            //console.log("itemPressed: " + item);
            currentItem = item;
            updateSelection();
            backgroundList.state = "HIDDEN";
            clipartList.state = "HIDDEN";
            if (currentItem !== null)
                sharedToolBar.state = "HIDDEN_DELAY";
            else
                sharedToolBar.state = "VISIBLE";
        }

        function showTextMenu() {
            textMenu.open();
        }

        function showImageMenu() {
            imageMenu.open();
        }

        function showClipartMenu() {
            clipartMenu.open();
        }

        function itemReleased() {
            //console.log("itemReleased");
            updateSelection();
            sharedToolBar.state = "VISIBLE";
        }

        function bringToFront(item) {
            for (var i = 0; i < items.children.length; i++)
                items.children[i].z--;
            item.z = items.children.length;
        }

        function sendToBack(item) {
            for (var i = 0; i < items.children.length; i++)
                items.children[i].z++;
            item.z = 1;
        }

        z: 1;
    }

    Component.onCompleted: {
        itemHighlight.state = "FULLSCREEN";
        var component = Qt.createComponent("CardBackground.qml");
        backgroundItem = component.createObject(mainItem);
        newBackgroundItem = component.createObject(mainItem);
        backgroundItem.source = "qrc:/images/1245944_74222603_854.jpg";
    }

    states: [
        State {
            name: "SAVE"
        }
    ]

    SequentialAnimation {
        id: saveAnim;
        PauseAnimation { duration: 300; }
        ParallelAnimation {
            PropertyAction { target: itemHighlight; property: "state"; value: "HIDDEN"; }
            PropertyAction { target: sharedToolBar; property: "state"; value: "HIDDEN"; }
        }
        PauseAnimation { duration: 300; }
        ScriptAction { script: { cardTools.saveJPG(fileName); updateSelection(); } }
        ParallelAnimation {
            PropertyAction { target: itemHighlight; property: "state"; value: "VISIBLE"; }
            PropertyAction { target: sharedToolBar; property: "state"; value: "VISIBLE"; }
        }
    }



    function backgroundPressed() {
        items.itemPressed(null);
    }


    function updateSelection() {
        //console.log("updateSelection");
        if (currentItem !== null) {
            var offset = currentItem.selectionOffset;
            itemHighlight.x = currentItem.x - offset;
            itemHighlight.y = currentItem.y - offset;
            itemHighlight.width = currentItem.width + 2*offset;
            itemHighlight.height = currentItem.height + 2*offset;
            itemHighlight.scale = currentItem.scale;
            itemHighlight.rotation = currentItem.rotation;
            itemHighlight.state = "VISIBLE";
        } else {
            itemHighlight.state = "FULLSCREEN";
        }
    }


    GestureArea {
        anchors.fill: parent;
        //onTap: console.log("tap received")
        //onPinch: console.log("onPinch received")
        //onPan: console.log("onPan received")
        onTapAndHold: {
            //console.log("onTapAndHold received")
            sharedToolBar.state = "VISIBLE";
            if (currentItem !== null)
                currentItem.openPrefs();
        }
        onSwipe: console.log("onSwipe received")
        onGesture: console.log("onGesture received")
    }


    Rectangle {
        id: itemHighlight;
        color: "transparent"
        x: -4;
        y: -4;
        width: parent.width + 8;
        height: parent.height + 8;
        border.width: 3
        border.color: "white"
        z: 1
        radius: 5;

        Rectangle {
            anchors.fill: parent
            anchors.margins: -3
            color: "transparent"
            border.width: 3
            border.color: "black"
            radius: 5;
        }

        Behavior on x {
             PropertyAnimation { duration: 250 }
        }
        Behavior on y {
             PropertyAnimation { duration: 250 }
        }
        Behavior on width {
             PropertyAnimation { duration: 250 }
        }
        Behavior on height {
             PropertyAnimation { duration: 250 }
        }
        Behavior on scale {
             PropertyAnimation { duration: 250 }
        }
        Behavior on rotation {
             RotationAnimation { duration: 250 }
        }
        Behavior on opacity {
             PropertyAnimation { duration: 250 }
        }

        states: [
            State {
                name: "FULLSCREEN"
                //PropertyChanges { target: itemHighlight; x: 0; y: 0; width: 854; height: 480; scale: 1.5; rotation: 0;}
            }, State {
                name: "HIDDEN"
                //PropertyChanges { target: itemHighlight; opacity: 0; }
            }, State {
                name: "VISIBLE"
                //PropertyChanges { target: itemHighlight; opacity: 0.6; }
            }
        ]

        transitions: [
            Transition {
                to: "FULLSCREEN"
                ScriptAction {
                    script: {
                        itemHighlight.x = 0;
                        itemHighlight.y = 0;
                        itemHighlight.width = 854;
                        itemHighlight.height = 480;
                        itemHighlight.scale = 1.1;
                        itemHighlight.rotation = 0;
                        itemHighlight.opacity = 0;
                    }
                }
            },
            Transition {
                to: "VISIBLE"
                ScriptAction {
                    script: {
                        itemHighlight.opacity = 0.5;
                    }
                }
            },
            Transition {
                to: "HIDDEN"
                ScriptAction {
                    script: {
                        itemHighlight.opacity = 0;
                    }
                }
            }
        ]

    }


    Rectangle {
        id: sharedToolBar
        visible: true
        height: 44
        y: 480-44;
        width: parent.width
        color: "#80000000"
        z:10

        Row {
            x: 2
            spacing: 0

            ToolButton {
                x: 2
                y: 1
                width: 172
                text: "Add image"
                flat: true;
                onClicked: addImage();
            }

            ToolButton {
                y: 1
                width: 172
                text: "Add text"
                flat: true;
                onClicked: addText();
            }

            ToolButton {
                y: 1
                width: 172
                text: "Add clipart"
                flat: true;
                onClicked: addClipart();
            }


            ToolButton {
                y: 1
                width: 172
                text: "Background"
                flat: true;
                onClicked: backgroundList.state = "VISIBLE";
            }

            ToolButton {
                y: 1
                width: 168
                text: "Menu"
                flat: true;
                onClicked: {
                    mainMenu.open();
                }
            }
        }

        states: [
            State {
                name: "VISIBLE"
                PropertyChanges { target: sharedToolBar; opacity: 0.8}
            },
            State {
                name: "HIDDEN"
                PropertyChanges { target: sharedToolBar; opacity: 0.0}
            },
            State {
                name: "HIDDEN_DELAY"
                PropertyChanges { target: sharedToolBar; opacity: 0.0}
            }
        ]

        transitions: [
            Transition {
                to: "HIDDEN_DELAY"
                SequentialAnimation {
                    PauseAnimation { duration: 650 }
                    ParallelAnimation {
                        PropertyAction { target: itemHighlight; property: "state"; value: "HIDDEN"; }
                        PropertyAnimation { target: sharedToolBar; properties: "opacity"; easing.type: Easing.InOutCubic}
                    }
                }
            },
            Transition {
                to: "HIDDEN"
                ParallelAnimation {
                    //PropertyAction { target: itemHighlight; property: "state"; value: "HIDDEN"; }
                    PropertyAnimation { target: sharedToolBar; properties: "opacity"; easing.type: Easing.InOutCubic}
                }
            },
            Transition {
                to: "VISIBLE"
                PropertyAnimation { target: sharedToolBar; properties: "opacity"; easing.type: Easing.InOutCubic}
                PropertyAction { target: itemHighlight; property: "state"; value: "VISIBLE"; }
            }
        ]
    }

    Dialog {
        id: infoDialog;
        title: Item {
            width: parent.width;
            Text {
                text: "Christmas eCards";
                font.family: "Helvetica";
                font.pointSize: 32;
                color: "white";
                anchors.centerIn: parent;
            }
        }
        content:
            Item {
                height: 200;
                width: parent.width;
                Text {
                    text: "Version: 1.0.0\nCreated by Sławomir Musiał";
                    anchors.centerIn: parent;
                    font.family: "Helvetica";
                    font.pointSize: 18;
                    color: "white"
                }
        }
        buttons: Item {
            width: parent.width;
            Button {
                text: "OK";
                anchors.centerIn: parent;
                onClicked: { infoDialog.close(); }
            }
        }

    }

    QueryDialog {
        id: overwriteDialog;
        titleText: "Overwrite file?"
        message: "File already exists. overwrite it?"
        acceptButtonText: "Yes"
        rejectButtonText: "No"
        onAccepted: {
            saveAnim.start();
        }
    }


    TextSheet {
        id: saveSheet;
        z: 100
        inputText: "eCard";
        titleText: "Enter name of JPG file";
        acceptButtonText: "Save";
        onAccepted: {
            fileName = saveSheet.inputText + ".jpg";
            if (cardTools.fileExists(fileName)) {
                overwriteDialog.message = "File " + fileName + " already exists. overwrite it?"
                overwriteDialog.open();
            } else
                saveAnim.start();
        }
        onRejected: {
            mainItem.enabled = true;
        }
    }


    TextSheet {
        id: textSheet;
        z: 100
        onAccepted: {
            if (currentItem === null) {
                var component = Qt.createComponent("CardText.qml");
                currentItem = component.createObject(items);
                currentItem.text = textSheet.inputText;
                currentItem.state = "CENTER"
                currentItem.z = items.children.length;
            } else {
                currentItem.text = textSheet.inputText;
                updateSelection();
            }
            mainItem.enabled = true;
        }
        onRejected: {
            mainItem.enabled = true;
        }
    }


    GallerySheet {
        id: gallerySheet;
        z: 100
        onAccepted: {
            if (currentItem === null) {
                var component = Qt.createComponent("CardImage.qml");
                currentItem = component.createObject(items);
                currentItem.source = gallerySheet.imageUrl;
                currentItem.state = "CENTER";
                currentItem.z = items.children.length;
            } else {
                currentItem.source = gallerySheet.imageUrl;
                updateSelection();
            }
            mainItem.enabled = true;
        }

        onRejected: {
            mainItem.enabled = true;
        }
    }

    ColorSheet {
        id: colorSheet;
        z: 100
        onAccepted: {
            currentItem.color = color;
            mainItem.enabled = true;
        }

        onRejected: {
            mainItem.enabled = true;
        }
    }

    SelectionDialog {
        id: frameDialog
        titleText: "Frame type"

        model: ListModel {
            ListElement { name: "Rectangle" }
            ListElement { name: "Rounded" }
            ListElement { name: "Glass" }
            ListElement { name: "None"  }
        }

        onAccepted: {
            currentItem.frameType = frameDialog.selectedIndex;
        }
    }


    QueryDialog {
        id: removeItemDialog
        titleText: "Remove item?"
        message: "Are you sure to remove selected item?"
        acceptButtonText: "Yes"
        rejectButtonText: "No"
        onAccepted: {
            currentItem.destroy();
            itemHighlight.state = "FULLSCREEN";
        }
    }

    QueryDialog {
        id: removeAllDialog
        titleText: "Remove all?"
        message: "Are you sure to remove all items?"
        acceptButtonText: "Yes"
        rejectButtonText: "No"
        onAccepted: {
            var count = items.children.length;
            console.log('items: ' + count);
            for (var i = count-1; i >= 0; i--)
                items.children[i].destroy();
            currentItem = null;
            updateSelection();
        }
    }

    function addImage() {
        mainItem.enabled = false;
        currentItem = null;
        gallerySheet.open();
    }

    function addText() {
        mainItem.enabled = false;
        currentItem = null;
        textSheet.inputText = '';
        textSheet.acceptButtonText = "Add";
        textSheet.open();
    }

    function addClipart() {
        clipartList.state="VISIBLE";
    }

    function changeColor() {
        mainItem.enabled = false;
        colorSheet.color = currentItem.color;
        colorSheet.updateSliders(currentItem.color);
        colorSheet.open();
    }

    // Create a menu with different menu items.
    Menu {
        id: mainMenu
        // visualParent is needed to specify the grayed out area.
        //visualParent: mainItem
        MenuLayout {
            MenuItem {text: "Preview"; onClicked: { itemHighlight.state = "HIDDEN"; sharedToolBar.state = "HIDDEN"; } }
            MenuItem {text: "Save as JPG"; onClicked: { saveSheet.open(); } }
            //MenuItem {text: "Send via MMS"; onClicked: { cardTools.sendMms(); } }
            //MenuItem {text: "Send via email"; onClicked: { fileName='eCard_email.jpg'; saveAnim.start(); cardTools.sendEmail(); } }
            MenuItem {text: "Remove all"; onClicked: { removeAllDialog.open() }}
            MenuItem {text: "About eCards"; onClicked: { infoDialog.open() }}
        }
    }


    Menu {
        id: textMenu
        // visualParent is needed to specify the grayed out area.
        //visualParent: mainItem
        MenuLayout {
            MenuItem {text: "Bring to front"; onClicked: { currentItem.state="TO_FRONT"; } }
            MenuItem {text: "Send to back"; onClicked: { currentItem.state="TO_BACK"; }}
            MenuItem {text: "Change text"; onClicked: { textSheet.inputText = currentItem.text; textSheet.acceptButtonText = "Change"; textSheet.open(); }}
            MenuItem {text: "Change color"; onClicked: { changeColor();}}
            MenuItem {text: "Remove"; onClicked: { removeItemDialog.open() }}
        }
    }


    Menu {
        id: imageMenu
        // visualParent is needed to specify the grayed out area.
        //visualParent: mainItem
        MenuLayout {
            MenuItem {text: "Bring to front"; onClicked: { currentItem.state="TO_FRONT";  } }
            MenuItem {text: "Send to back"; onClicked: { currentItem.state="TO_BACK"; }}
            MenuItem {text: "Change frame type"; onClicked: { frameDialog.selectedIndex = currentItem.frameType; frameDialog.open(); }}
            MenuItem {text: "Change frame color"; onClicked: { changeColor(); } }
            MenuItem {text: "Remove"; onClicked: { removeItemDialog.open() }}
        }
    }

    Menu {
        id: clipartMenu
        MenuLayout {
            MenuItem {text: "Bring to front"; onClicked: { currentItem.state="TO_FRONT";  } }
            MenuItem {text: "Send to back"; onClicked: { currentItem.state="TO_BACK"; }}
            MenuItem {text: "Remove"; onClicked: { removeItemDialog.open() }}
        }
    }



    ListModel {
        id: contactModel
        ListElement {
            icon: "qrc:/images/1245944_74222603_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1246409_99270565_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1318754_92186960_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1322489_65597160_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1322490_67668426_654.jpg"
        }
        ListElement {
            icon: "qrc:/images/1322945_58009679_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1322944_29680876_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1320275_32937333_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1320570_91331894_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1322322_90458966_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1321205_32860517_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1318751_32428650_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1319232_45618166_854.jpg"
        }
        ListElement {
            icon: "qrc:/images/1319980_83321539_854.jpg"
        }
    }

    ListModel {
        id: clipartModel
        ListElement {
            icon: "qrc:/cliparts/1245945_49647078_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1248991_20292999_250.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1245946_30464171_1_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319176_10710515_1_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319176_10710515_2_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_5.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_6.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_7.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_8.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_1.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_2.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_4.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1319181_79246985_3.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1246412_26679794_1.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1246412_26679794_2.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1246412_26679794_3.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1246412_26679794_4.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1245946_30464171_3_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1328711_55133003_200.png"
        }
        ListElement {
            icon: "qrc:/cliparts/1321208_58931672_200.png"
        }
    }


    Component {
        id: clipartDelegate
        Image {
            width: 100; height: 100
            source: icon
            fillMode: Image.PreserveAspectFit

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    var component = Qt.createComponent("CardImage.qml");
                    currentItem = component.createObject(items);
                    currentItem.source = icon;
                    currentItem.clipart = true;
                    currentItem.z = items.children.length;
                    currentItem.state = "CENTER"
                }
            }
        }
    }

    ListView {
        id: clipartList;
        width: 854
        height: 100
        x: 0
        z: 140
        parent: mainItem.parent;
        state: "HIDDEN"

        orientation: "Horizontal";
        model: clipartModel
        delegate: clipartDelegate
        visible: false;

        states: [
            State {
                name: "VISIBLE"
                PropertyChanges { target: clipartList; y:380; scale: 1; }
                PropertyChanges { target: sharedToolBar; state: "HIDDEN";  }
            },
            State {
                name: "HIDDEN"
                PropertyChanges { target: clipartList; y: 480+25; scale: 1.2; }
                PropertyChanges { target: sharedToolBar; state: "VISIBLE"; }
                //PropertyAction { target: sharedToolBar; property: "state"; value: "VISIBLE" }
            }
        ]

        transitions: [
            Transition {
                to: "VISIBLE";
                SequentialAnimation {
                    PropertyAction { target: clipartList; property: "visible"; value: true; }
                    PropertyAnimation { target: clipartList; properties: "scale,y"; easing.type: Easing.OutQuad; }
                }
            },
            Transition {
                to: "HIDDEN";
                SequentialAnimation {
                    PropertyAnimation { target: clipartList; properties: "scale,y"; easing.type: Easing.InQuad; }
                    PropertyAction { target: clipartList; property: "visible"; value: false; }
                }
            }
        ]

        Rectangle {
            anchors.fill : parent;
            //anchors.topMargin: -20;
            z: -1;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.1; color: "#60000000" }
                GradientStop { position: 1.0; color: "#A0000000" }
            }
        }
    }

    Component {
        id: highlight
        Rectangle {
            width: 177;
            height: 100;
            color: "transparent";
            radius: 6
            border.color: "#80000000"
            border.width: 10
            x: backgroundList.currentItem.x
            y: backgroundList.currentItem.y
            z: 100
            smooth: false;
            opacity: 0.8;

            Behavior on x { PropertyAnimation { duration: 400; easing.type: Easing.InOutQuad;} }

            Rectangle {
                anchors.fill: parent;
                anchors.margins: 3;
                color: "transparent";
                radius: 4
                border.color: "white";
                border.width: 4
                z: 0
            }
        }
    }

    Component {
        id: backgroundDelegate
        Image {
            width: 177; height: 100
            source: icon

            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    backgroundItem.state = "FADEOUT";
                    newBackgroundItem.source = icon;
                    newBackgroundItem.state = "HIDDEN";
                    newBackgroundItem.state = "FADEIN";

                    var back = backgroundItem;
                    backgroundItem = newBackgroundItem;
                    newBackgroundItem = back;

                    backgroundList.currentIndex = index
                }
            }
        }
    }

    ListView {
        id: backgroundList;
        width: 854
        state: "HIDDEN"
        height: 100
        x: 0
        z: 130
        parent: mainItem.parent;
        spacing: 2;
        highlight: highlight;
        highlightFollowsCurrentItem: false;
        orientation: "Horizontal";
        visible: false;

        model: contactModel
        delegate: backgroundDelegate

        states: [
            State {
                name: "VISIBLE"
                PropertyChanges { target: backgroundList; y:380; scale: 1; }
                PropertyChanges { target: sharedToolBar; state: "HIDDEN";  }
            },
            State {
                name: "HIDDEN"
                PropertyChanges { target: backgroundList; y: 480+25; scale: 1.2; }
                PropertyChanges { target: sharedToolBar; state: "VISIBLE"; }
                //PropertyAction { target: sharedToolBar; property: "state"; value: "VISIBLE" }
            }
        ]

        transitions: [
            Transition {
                to: "VISIBLE";
                SequentialAnimation {
                    PropertyAction { target: backgroundList; property: "visible"; value: true; }
                    PropertyAnimation { target: backgroundList; properties: "scale,y"; easing.type: Easing.OutQuad; }
                }
            },
            Transition {
                to: "HIDDEN";
                SequentialAnimation {
                    PropertyAnimation { target: backgroundList; properties: "scale,y"; easing.type: Easing.InQuad; }
                    PropertyAction { target: backgroundList; property: "visible"; value: false; }
                }
            }
        ]

        Rectangle {
            anchors.fill : backgroundList;
            anchors.topMargin: -15;
            z: -1;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "transparent" }
                GradientStop { position: 0.2; color: "#60000000" }
                GradientStop { position: 1.0; color: "#A0000000" }
            }
        }
    }


}
